<template>
  <div class="bifBox bg-f2" id="userBig">
    <div class="bg-f2 bg-fff">
      <ul class="btn_header">
        <li>
          <el-button type="success" size="medium" class="max_btn btnSizeStyle" icon="el-icon-plus" :disabled="quanxianBtns.btn1" @click="addRole('添加运维日志')">添加运维日志</el-button>
        </li>
        <li>
          <div class="select">
            <span>日志时间：</span>
            <el-date-picker
              v-model="harderBox.riqi"
              :picker-options="pickerBeginDateBefore"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
        </li>
        <li>
          <el-input v-model="harderBox.nameList" clearable prefix-icon="el-icon-search" placeholder="输入运维员姓名" class="search_btn"></el-input>
        </li>
        <li>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">查询</el-button>
        </li>
      </ul>
      <el-card>
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          ref="multipleTable"
          :data="roleList"
          stripe
          border
          highlight-current-row
          style="width: 100%"
          v-loading="tableLoad"
          @sort-change="sortthiscolumn"
        >
          <!-- :default-sort="{ prop: 'rzsj', order: 'descending' }" -->
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>

          <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
          <el-table-column prop="yhzsxm" label="运维员" width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.yhzsxm }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="jrwcgz" label="今日完成工作" width="300">
            <template slot-scope="scope">
              <el-tooltip effect="dark" placement="top-start" v-show="scope.row.jrwcgz === null || scope.row.jrwcgz.length > 42 ? true : false">
                <div slot="content" style="width: 400px">{{ scope.row.jrwcgz }}</div>
                <span :class="scope.row.jrwcgz === null || scope.row.jrwcgz.length > 42 ? 'usersNumber' : ''">{{ scope.row.jrwcgz }}</span>
              </el-tooltip>
              <span v-show="scope.row.jrwcgz === null || scope.row.jrwcgz.length > 42 ? false : true">{{ scope.row.jrwcgz }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="wwcgz" label="未完成工作" width="300">
            <template slot-scope="scope">
              <el-tooltip effect="dark" placement="top-start" v-show="scope.row.wwcgz === null || scope.row.wwcgz.length > 42 ? true : false">
                <div slot="content" style="width: 400px">{{ scope.row.wwcgz }}</div>
                <span :class="scope.row.wwcgz === null || scope.row.wwcgz.length > 42 ? 'usersNumber' : ''">{{ scope.row.wwcgz }}</span>
              </el-tooltip>
              <span v-show="scope.row.wwcgz === null || scope.row.wwcgz.length > 42 ? false : true">{{ scope.row.wwcgz }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="xyxtgz" label="需协调工作" width="300">
            <template slot-scope="scope">
              <el-tooltip effect="dark" placement="top-start" v-show="scope.row.xyxtgz === null || scope.row.xyxtgz.length > 42 ? true : false">
                <div slot="content" style="width: 400px">{{ scope.row.xyxtgz }}</div>
                <span :class="scope.row.xyxtgz === null || scope.row.xyxtgz.length > 42 ? 'usersNumber' : ''">{{ scope.row.xyxtgz }}</span>
              </el-tooltip>
              <span v-show="scope.row.xyxtgz === null || scope.row.xyxtgz.length > 42 ? false : true">{{ scope.row.xyxtgz }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="rzsj" label="日志时间" min-width="100" sortable>
            <template slot-scope="scope">{{ scope.row.rzsj | dateFormat }}</template>
          </el-table-column>
          <el-table-column prop="bz" label="备注">
            <template slot-scope="scope">
              <el-tooltip effect="dark" placement="top-start" v-show="scope.row.bz === null || scope.row.bz.length > 42 ? true : false">
                <div slot="content" style="width: 400px">{{ scope.row.bz }}</div>
                <span :class="scope.row.bz === null || scope.row.bz.length > 42 ? 'usersNumber' : ''">{{ scope.row.bz }}</span>
              </el-tooltip>
              <span v-show="scope.row.bz === null || scope.row.bz.length > 42 ? false : true">{{ scope.row.bz }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-button type="text" :disabled="quanxianBtns.btn2" @click="addRole('编辑业务日志', scope.row)">编辑</el-button>
              <span class="operation"></span>
              <el-button type="text" class="color_f56f6f" :disabled="quanxianBtns.btn3" @click="deteleRole(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
          <span>您确定要删除吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" class="btnSizeStyle">取 消</el-button>
            <el-button type="primary" @click="deleteItem2" v-preventReClick class="btnSizeStyle">确 定</el-button>
          </span>
        </el-dialog>
        <div class="pageFloat">
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { yeWu } from '@/utils/allUrl.js'
// import { startLoading, endLoading } from '@/utils/loading.js'
import { getUrl } from '@/utils/getUrl.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data: function () {
    return {
      harderBox: {
        riqi: '',
        nameList: '',
      },
      currentPage: 1,
      pageSize: 10,
      roleList: [],
      total: 0,
      dialogVisible: false,
      deleteID: '', // 删除的id
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.roleList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.jurisdictionBtn()
    if (JSON.stringify(this.$route.params) !== '{}') {
      var riqi = ''
      if (this.$route.params.riqi !== '') {
        riqi = this.$route.params.riqi.split('>')
      }
      this.harderBox.riqi = riqi
      this.harderBox.nameList = this.$route.params.nameList
      this.searchBtn()
    } else {
      this.getList()
    }
  },
  mounted: function () {
    // startLoading(document.getElementById('userBig'))
  },
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.searchBtn()
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'YWZX_YWRZ_YWRZLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'ywrz:insertYeWuRiZhi') {
              this.quanxianBtns.btn1 = false // 业务日志添加
            } else if (item2.qxdm === 'ywrz:updateYeWuRiZhi') {
              this.quanxianBtns.btn2 = false // 业务日志修改
            } else if (item2.qxdm === 'ywrz:deleteYeWuRiZhi') {
              this.quanxianBtns.btn3 = false // 业务日志删除
            }
          })
        }
      })
    },
    // 获取数据
    getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${yeWu}ywrz/selectYeWuRiZhi`, params)
      switch (res.code) {
        case '0000':
          this.roleList = res.data.list
          this.total = res.data.countList
          break
        default:
          this.roleList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    handleClick(tab, event) {},
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.searchBtn()
    },
    handleCurrentChange(newChange) {
      this.currentPage = newChange
      this.searchBtn()
    },
    // 添加/修改
    addRole(title, scope) {
      var riqi = ''
      if (this.harderBox.riqi !== '') {
        riqi = this.harderBox.riqi.join('>')
      }
      if (scope) {
        // 编辑
        this.$router.push({
          name: 'addJournal',
          query: {
            // 传递参数
            title: title,
            content: scope.id,
            riqi: riqi, // 日志时间
            nameList: this.harderBox.nameList, // 搜索条件
          },
        })
      } else {
        // 添加
        this.$router.push({
          name: 'addJournal',
          query: {
            title: title,
            riqi: riqi, // 日志时间
            nameList: this.harderBox.nameList, // 搜索条件
          },
        })
      }
    },
    // 删除
    deteleRole(scope) {
      this.deleteID = scope.id
      this.dialogVisible = true
    },
    async deleteItem2() {
      const params = new URLSearchParams()
      params.append('ID', this.deleteID)
      const { data: res } = await this.$http.post(`${yeWu}ywrz/deleteYeWuRiZhi`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.dialogVisible = false
      this.getList()
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    // 查询
    searchBtn() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const { riqi, nameList } = this.harderBox
      const params = new URLSearchParams()
      if (riqi) {
        params.append('RZSJS', riqi[0])
        params.append('RZSJE', riqi[1])
      }
      params.append('YHZSXM', nameList)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
  },
}
</script>
<style lang="scss" scoped>
.bifBox {
  .btn_header {
    height: 35px;
    line-height: 33px;
    > li:first-child {
      margin-left: 0;
    }
    > li {
      float: left;
      margin-left: 10px;
      margin: 0 10px 15px 0;
    }
    .select {
      > span {
        font-weight: 600;
      }
    }
    .search_btn {
      width: 320px;
    }
  }
  .operation {
    display: inline-block;
    margin: 0 5px;
    height: 10px;
    border-left: 1.5px solid #b3b3b3;
  }
  .usersNumber {
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    position: relative;
  }

  .usersNumber:after {
    content: '...';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
  .el-card {
    border-radius: 0;
    width: 100%;
  }
  .el-drawer {
    .addUer_title {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      height: 61px;
      line-height: 61px;
      border-bottom: 1px solid #ededed;
      box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
      > span {
        font-size: 18px;
        font-weight: 600;
      }
      .addUer_icon {
        font-size: 20px;
        font-weight: 700;
        display: flex;
        flex-flow: column;
        justify-content: center;
        cursor: pointer;
      }
    }
    .el-row {
      margin-top: 30px;
    }
    .forms_fooer {
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding: 0 20px;
      box-sizing: border-box;
      align-items: center;
      height: 61px;
      line-height: 61px;
      border-top: 1px solid #ededed;
      .users_btn {
        padding: 0 10px;
        height: 36px;
      }
    }
  }
  .pageFloat {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 48px;
  }
}
</style>
